<template>
  <div class="header-container">
    <div class="l-container">
      <el-button style="margin-right: 20px" @click="handleMenu()" icon="el-icon-menu" size="mini"></el-button>
      <!--面包屑-->
      <el-breadcrumb separator="/" >
        <el-breadcrumb-item v-for="item in tags" :key="item.url" :to="{ path: item.url==null ? '/home': item.url }">{{ item.menuName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-container">
      <!--<el-tag class="">{{ nickname }}</el-tag>-->
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link ">
          <el-avatar :src="avatar">
            <img src="../assets/fallback.png"/>
          </el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="cancel">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--管理员个人信息-->
      <el-drawer
        title="个人中心"
        :visible.sync="drawerAdmin"
        :direction="direction"
        :before-close="handleClose"
        style="text-align: center">
        <el-form ref="adminForm" :rules="rules" :inline="true" :model="adminForm" label-width="80px" >
          <el-form-item label="头像" prop="avatar" >
            <el-upload
              :disabled="disabled"
              style="border:1px dashed #d1d1d1"
              class="avatar-uploader"
              :action="uploadURL"
              name="uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="adminForm.avatar" :src="adminForm.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <br/>
          <el-form-item label="姓名" prop="username" >
            <el-input placeholder="请输入姓名" v-model="adminForm.username" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input placeholder="请输入昵称" v-model="adminForm.nickname" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱" v-model="adminForm.email" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input placeholder="请输入电话" v-model="adminForm.phone" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
            <el-input placeholder="请输入身份证号" v-model="adminForm.idNumber" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-show="passwordShow">
            <el-input placeholder="请输入密码" v-model="adminForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="" v-show="passwordShow">
            <el-input placeholder="请输再次输入" v-model="newPassword" show-password></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button :type="edit==1 ? 'primary' : 'danger'"
                     @click="handleEdit"
                     plain round
                     :icon="edit==1 ? 'el-icon-edit' : 'el-icon-close'">{{ edit==1 ? '编辑' : '取消'}}
          </el-button>
          <el-button type="primary" @click="handleSave" plain round icon="el-icon-check">保存</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
  /*辅组函数*/
  import { mapState } from 'vuex'
  import Cookie from "js-cookie"
  import { updateByIdAdmin, editAdmin } from "../api"
    export default {
        name: "CommonHeader",
        data(){
            return{
                //tags:this.$store.state.tab.tableList
                avatar:'',
                nickname:'',
                drawerAdmin: false,
                direction: 'rtl',
                adminForm: {
                    id: '',
                    username: '',
                    avatar: '',
                    nickname: '',
                    password: '',
                    email: '',
                    phone: '',
                    idNumber: '',
                    delFlag: '',
                },
                rules:{
                    username: [
                        {required: true,message: '请输入姓名'}
                    ],
                    nickname: [
                        {required: true,message: '请输入昵称'}
                    ],
                    password: [
                        {required: true,message: '请输入密码'}
                    ],
                    email: [
                        {required: true,message: '请输入邮箱'}
                    ],
                    phone: [
                        {required: true,message: '请输入电话'}
                    ],
                    idNumber: [
                        {required: true,message: '请输入身份证号码'}
                    ]
                },
                uploadURL: 'http://localhost:8080/admin/uploadAvatar',
                disabled: true,
                passwordShow:false,
                newPassword:'',
                edit:1
            }
        },
        methods:{
            //文件上传成功
            handleAvatarSuccess(res, file) {
                this.adminForm.avatar=file.response
                //this.imageUrl = URL.createObjectURL(file.raw);
            },
            //文件上传之前
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt3M = file.size / 1024 / 1024 < 3;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                    return false;
                }
                if (!isLt3M) {
                    this.$message.error('上传头像图片大小不能超过 3MB!');
                    return false;
                }
                return true;
            },
            //设置信息
            setHeader(){
                let type=JSON.parse(Cookie.get("type"));
                let json=null;
                if (type==1){//管理员
                    json=JSON.parse(Cookie.get("admin"));
                }else if (type==2){//员工

                }else {//业主

                }
                if (json!=null){
                    this.avatar=json.avatar;
                    this.nickname=json.nickname;
                }
            },
            handleMenu(){
                //console.log(this.$store.state.tab.isCollapse);
                this.$store.commit('collapseMenu');
            },
            handleClick(command){
                //  个人中心
                if(command=="personal"){
                    let type=JSON.parse(Cookie.get("type"));
                    if (type==1){
                        this.drawerAdmin=true;
                        let admin = JSON.parse(Cookie.get("admin"));
                        editAdmin(admin).then(({data})=>{
                            this.adminForm=data;
                            this.newPassword=data.password;
                        });
                    }else {

                    }
                }
                //退出
                if (command == "cancel"){
                    //清除token
                    Cookie.remove("token");
                    //清除menu
                    Cookie.remove("menu");
                    //清除路由
                    //
                    //跳转到登录页
                    this.$router.push("/login");
                }
            },
            //关闭个人中心
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //编辑
            handleEdit(){
                this.edit=(this.edit==1 ? 0 : 1 );
                if (this.edit==0){
                    this.disabled=false;
                    this.passwordShow=true;
                }else{
                    this.disabled=true;
                    this.passwordShow=false;
                }
            },
            //保存
            handleSave(){
                if (this.newPassword!=this.adminForm.password){
                    this.$message.error('密码不一致');
                    return ;
                }
                updateByIdAdmin(this.adminForm).then(({data})=>{
                    this.$message({
                        type: data.type,
                        message: data.message
                    });
                });
                this.edit=1;
                this.disabled=true;
                this.passwordShow=false;
            }
        },
        computed:{
            ...mapState({
                tags:state => state.tab.tableList
            })
        },
        mounted() {
            this.setHeader();
        }
    }
</script>

<style lang="less" scoped>
.header-container{
  padding: 0 20px;
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text{
    margin-left: 10px;
    color: #ffffff;
    font-size: 14px;
  }
  .r-container{
    .user{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .l-container{
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item{
      font-weight: normal;
      .el-breadcrumb__inner{
        &.is-link{
          color: #666;
        }
      }
      //伪类让面包屑的最后一个变为白色
      &:last-child{
        .el-breadcrumb__inner{
          color: #fff;
        }
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
